iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 10
0
自我挑戰組

純新手學習 JavaScript系列 第 10

新手學習JavaScript: Day10 - 物件(Object)

  • 分享至 

  • xImage
  •  

我們在前面的文章介紹過型別可以分成基本型別與物件型別,而基本型別我們也在前面一一介紹過了。今天我們就來聊聊「物件型別吧」。

物件(Object)

什麼是物件?它可以是個零至多種屬性(properties)的集合。而「屬性」,它是鍵(key)與值(value)之間的關聯。一個屬性的值可以是基本型別,也可以是另一個物件或是一個函數。

如果是新手的話,看到這邊應該還是很難理解。讓我們直接來看一下範例:

var person = {
  name: "bob",
  age: 30,
  gender: "male",
  greeting: function() {
    alert("Hi! I'm " + this.name + ".");
  }
};

像這樣直接用大括號{},可以建立一個新的物件,並同時建立四個屬性(name, age, gender, greeting)至物件內,而greeting的值是一個函數。

物件屬性的存取

點記法 (Dot notation)

顧名思義,我們可以透過點「.」來進行存取:

var person = {
  name: "bob",
  age: 30,
  gender: "male",
  greeting: function() {
    alert("Hi! I'm " + this.name + ".");
  }
};


console.log(person.name); // "bob"
person.greeting(); // "Hi! I'm bob."

括弧記法 (Bracket notation)

透過[]中括號來進行存取:

var person = {
  name: "bob",
  age: 30,
  gender: "male",
  greeting: function() {
    alert("Hi! I'm " + this.name + ".");
  }
};

console.log(person["name"]);  // "bob"
person["greeting"](); // "Hi! I'm bob."

那這兩個方法有什麼差別呢?如果物件的key是不合法的識別字(如帶有空白的自串或是數字),點記法會噴錯,而括弧記法可以存取,範例:

var person = {
  "1": "hi!",
  "say hi": function() {
    alert("Hi! I'm " + this.name + ".");
  }
};


person.1;  // SyntaxError: Unexpected number
person.say hi() // SyntaxError: Unexpected identifier

console.log(person["1"]);  // "bob"
person["say hi"](); // "Hi! I'm bob."

屬性的新增與刪除

如果要新增屬性,其實跟變數一樣,用=指派給它就好。

var obj = {};

obj.name = "new object";

console.log(obj.name);  // "new object"

要刪除的話,則是透過delete來刪除

var obj = {
  name: "new object"
};

delete obj.name;

console.log(obj.name); // undefined

以上就是JavaScript物件的基本介紹。
各位明天見!


上一篇
新手學習JavaScript: Day09 - 三元運算子與迴圈
下一篇
新手學習JavaScript: Day11 - 陣列(Array)
系列文
純新手學習 JavaScript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言